<!--文章分页-->
<template>
  <div>

    <!-- 顶部分页 -->
    <el-pagination background layout="prev, pager, next" :page-count="totalPage"
                   :page-size="size"
                   :current-page="currentPage"
                   @current-change="pageChange"

    ></el-pagination>


    <el-row>


      <el-col :xs="24" :sm="12" :md="8" :lg="6"   v-for="item in pageInfo" :key="item.id" class="col">
        <el-card :body-style="{ padding: '0px' }" class="card"
        >
          <!-- 跳转到文章详情 并带上文章id -->
          <a :href="detailUrl(item.id,item.title)">
          <img
            :src="getImgsURL(item)"
            class="image"
            @click="jumpPageDetail(item.id,item.title)"
          >
          </a>
          <div style="padding: 14px;">
            <span>{{item.title}}</span>
              <div>
              <router-link v-for="channels in item.channelList" :key="channels.id" :to="{name:'channelDetail',query:{channelId:channels.channelId,channelName:channels.channelName }}">
                {{channels.channelName}}
              </router-link>
              </div>

<!--            <div class="bottom clearfix">-->
<!--              <el-row>-->

<!--&lt;!&ndash;                <span>100k </span>&ndash;&gt;-->
<!--&lt;!&ndash;                <i class="el-icon-view"></i>&ndash;&gt;-->
<!--                &lt;!&ndash;图片数&ndash;&gt;-->
<!--                <span>{{item.imgs.length==0 ? 0 : item.imgs.split('&&').length}}P</span>-->
<!--                &lt;!&ndash;                <span>{{item.imgs}}P</span>&ndash;&gt;-->
                <time class="time">{{dateUtil.stringParseDate(item.crDate,dateUtil.NOSS)}}</time>
<!--                <el-col :span="6" :offset="18">-->
<!--                  <el-dropdown split-button type="primary" class=" el-icon&#45;&#45;right" style="top:-30px" v-if="flag.handle">-->
<!--                    操作-->
<!--                    <el-dropdown-menu slot="dropdown">-->
<!--                      <el-dropdown-item @click.native="update(item.id)" v-if="flag.update">修改</el-dropdown-item>-->
<!--                      <el-dropdown-item @click.native="convertDel(item.id)" v-if="flag.del">删除</el-dropdown-item>-->
<!--                    </el-dropdown-menu>-->
<!--                  </el-dropdown>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->
          </div>
        </el-card>
      </el-col>

    </el-row>
    <!-- 底部分页 -->
    <el-pagination background layout="prev, pager, next" :page-count="totalPage"
                   :page-size="size"
                   :current-page="currentPage"
                   @current-change="pageChange"

    ></el-pagination>

  </div>
</template>


<script>
  import {DateUtil} from "../../utils/DateUtil";
  import {StringUtil} from "../../utils/StringUtil";
  import {PageType} from "../constant/PageType";
  import {Handle} from "../constant/Handle";
  import {Channel} from "../req/Channel";
  import {Artical} from "../req/Artical";
  import {ContentType} from "../constant/ContentType";
  import {ResultStatus} from "../constant/ResultStatus";
  import {Origin} from "../constant/Origin";
  import config from "../home/Index";
  import configs from '@/config/'


  export default {
    props: {},
    data() {
      return {
        cardSpan:6,//
        size: 40,//数量
        pageInfo: {}, //接收分页数据
        totalPage: 1,//总页数
        currentPage: 1, //当前页数
        dateUtil: DateUtil,//时间工具
        baseURL: this.$axios.defaults.baseURL,
        stringUtil: StringUtil,
        baseIMG: this.$axios.defaults.baseIMG,
        pageType: "",//分页类型
        flag: {
          handle: true,
          update: true,
          del: true,

        },
        fileServer:this.$axios.defaults.fileServer,
      };
    },
    mounted() {

    },
    methods: {
      /**
       * 查询
       * @param data
       */
      queryPage(data) {
        this.pageType = data.pageType;
        this.size = data.size;
        let list = data.list;
        this.convertList(list);
        this.pageInfo = list;
        this.totalPage = data.totalPage;
        this.currentPage = data.page;

      },
      /**
       * 对不同的页面集合转换
       * @param data
       */
      convertList(data) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          if (StringUtil.checkNull(data[i])) {
            continue;
          }
          //替换失效的文件服务
          let descre =  StringUtil.replace(item.descre,configs.invalidFileserver,configs.replateFileserver)
          let otherPre = StringUtil.replace(item.otherPre,configs.invalidFileserver,configs.replateFileserver)
          let otherResourceFile = StringUtil.replace(item.otherResourceFile,configs.invalidFileserver,configs.replateFileserver)
          item.descre = descre;
          item.otherPre = otherPre;
          item.otherResourceFile = otherResourceFile
          data[i] = item;
          switch (this.pageType) {
            case PageType.HOME:
              this.flag.handle = false;
              break;
            case PageType.CHANNEL:
              this.flag.handle = false;
              item.preImg = item.ico;
              item.title = item.channelName;
              item.imgs = item.ico;
              data[i] = item;
              break;
            case PageType.ARTICAL:
              break;
            case PageType.COLLECTION:
              this.flag.update = false;
              break;
            default:
              break;
          }
        }
      },
      /**
       * 换页
       * @param page
       */
      pageChange(page) {
        this.$emit("func", page);
      },
      /**
       * 预览图
       * @param data
       * @returns {string}
       */
      getImgsURL(data) {

        if (StringUtil.checkNull(data.preImg) && StringUtil.checkNull(data.otherPre)) {
          return this.baseIMG;
        }
        if(!StringUtil.checkNull(data.otherPre)){
          return data.otherPre;
        }

        return  this.fileServer + StringUtil.replace(data.preImg, '\\', '/');

      },
      //详情页面url
      detailUrl(id,name){
        switch (this.pageType) {
          case PageType.ARTICAL:
            return 'ArticalDetails?id=' + id;
            break;
          case PageType.CHANNEL:
            return `channel/detail?channelId=${id}&channelName=${name}`
            break;
          case PageType.HOME:
            return 'ArticalDetails?id=' + id;
            break;
          case PageType.COLLECTION:
            return 'ArticalDetails?id=' + id;
            break;
          default:
            break;
      }},
      /**
       * 页面跳转
       * @param id
       */
      jumpPageDetail(id,name) {
        let routeData;
        switch (this.pageType) {
          case PageType.ARTICAL:
            //新标签中打开
            //  routeData = this.$router.resolve({path: 'ArticalDetails?id=' + id});
            // window.open(routeData.href, '_blank');
            //当前页面打开
            this.$router.push({path: 'ArticalDetails?id=' + id})
            break;
          case PageType.CHANNEL:
            //  routeData = this.$router.resolve({name: 'channelDetail', query: {channelId: id, channelName:name}});
            // window.open(routeData.href, '_blank');
            this.$router.push({name: 'channel', query: {channelId: id, channelName:name}});
            break;
          case PageType.HOME:
            // routeData = this.$router.resolve({path: 'ArticalDetails?id=' + id});
            // window.open(routeData.href, '_blank');
            this.$router.push({path: 'ArticalDetails?id=' + id});
            break;
          case PageType.COLLECTION:
            // routeData = this.$router.resolve({path: 'ArticalDetails?id=' + id});
            // window.open(routeData.href, '_blank');
            this.$router.push({path: 'ArticalDetails?id=' + id});
            break;
          default:
            break;
        }
      },
      /**
       * 修改
       * @param id
       */
      update(data) {
        switch (this.pageType) {
          case PageType.ARTICAL:
            this.$router.push({path: 'articalAdd', query: {id: data, handle: Handle.UPDATE}});
            break;
          case PageType.CHANNEL:
            this.$router.push({path: 'channelAdd', query: {id: data, handle: Handle.UPDATE}});
            break;
          case PageType.HOME:
            this.$router.push({path: 'ArticalDetails?id=' + data});
            break;
          default:
            break;
        }
      },
      /**
       * 删除
       * @param id
       */
      convertDel: async function (data) {
        let flag = await this.confirmBox();
        if (!flag) {
          return;
        }
        let url = "";
        switch (this.pageType) {
          case PageType.ARTICAL:
            let artical = new Artical();
            artical.handle = Handle.DEL;
            artical.id = data;
            url = "/artical/save";
            this.del(url, artical);
            location.reload()
            break;
          case PageType.CHANNEL:
            let channel = new Channel();
            channel.handle = Handle.DEL;
            channel.id = data;
            url = "/channel/save"
            this.del(url, channel);
            location.reload()
            break;
          case PageType.HOME:
            break;
          case PageType.COLLECTION:
            let collection = {articalId: data, handle: Handle.DEL};
            url = "/collection/save";
            this.del(url, collection);
            location.reload();
            break;
          default:
            break;
        }
      },
      del(url, json) {
        this.$axios
          .post(url,
            json, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {

            let datas = response.data;
            if (datas.code == ResultStatus.SUCCESS) {
              this.$notify(StringUtil.success(datas.msg));
            } else {
              this.$notify(StringUtil.warning(datas.msg));

            }
          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      /**
       * 确认框
       * @returns {boolean}
       */
      confirmBox: async function () {
        let flag = false;
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除中。。。!'
          });
          flag = true;
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除'
          });
          flag = false;
        });
        return flag;
      },

    },
    components: {}

  };

</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }


  .image {
    width: 462.953px ;
    height: 320px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .card {
    transform: scale(0.8);
    width: 462.953px ;
    height: 423.375px;
  }



</style>
